<template>
  <div class="BaseSearchBar">
    <el-card body-style="padding:0px">
      <el-row type="flex" justify="flex-start">
        <!-- 标题 -->
        <el-col :span="2" type="flex1">
          <div class="search-title">条件搜索栏</div>
        </el-col>
        <!-- 药品编码 -->
        <el-col :span="4">
          <BaseSearchBarItem>
            <div slot="lable" class="key">药品编码:</div>
            <div slot="input">
              <el-input v-model="SearchKey" placeholder="请输入关键字" />
            </div>
          </BaseSearchBarItem>
        </el-col>

        <!-- 药品名称 -->
        <el-col :span="4">
          <BaseSearchBarItem>
            <div slot="lable" class="key">药品名称:</div>
            <div slot="input">
              <el-input v-model="SearchName" placeholder="请输入关键字" />
            </div>
          </BaseSearchBarItem>
        </el-col>

        <!-- 细菌名称 -->
        <el-col :span="4">
          <BaseSearchBarItem>
            <div slot="lable" class="key">细菌名称:</div>
            <div slot="input">
              <el-input v-model="SearchBacteria" placeholder="请输入关键字" />
            </div>
          </BaseSearchBarItem>
        </el-col>

        <!-- 按钮 -->
        <el-col :span="2" style="margin-left: 12px;display: flex;
        align-items: center;">
          <el-button type="primary" size="medium">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import BaseSearchBarItem from "../../../components/BaseSearchBarItem";
export default {
  name: "BaseSearchBar",
  components: {
    BaseSearchBarItem
  },
  props: {
    isShow: {
      input: null,
      key: null
    }
  },
  data() {
    return {
      SearchKey: "",
      SearchName: "",
      SearchBacteria: ""
    };
  }
};
</script>
<style>
.search-title {
  color: #696969;
  border-right: 1px solid #c2c2c2;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
</style>
